<template>
  <div>
    <el-form label-width="5em" @change="handleModify()">
      <el-form-item label="时间范围">
        <el-date-picker
          class="input-inline"
          v-model="formData.duration"
          type="daterange"
          value-format="yyyy-MM-dd"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="人员范围">
        <el-cascader
          class="input-inline"
          :options="clientCascader"
          :show-all-levels="false"
          :clearable="true"
          :props="{multiple:true,expandTrigger:'hover'}"
          v-model="formData.client"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="检查项目" v-if="sourceType=='inspect'">
        <el-select
          class="input-inline"
          v-model="formData.category"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="category in inspectCategories"
            :key="category"
            :label="category"
            :value="category"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="纠违项目" v-if="sourceType=='rectify'">
        <el-select
          class="input-inline"
          v-model="formData.category"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="category in rectifyCategories"
            :key="category"
            :label="category"
            :value="category"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="席位范围">
        <el-cascader
          class="input-inline"
          :options="positionCascader"
          :show-all-levels="true"
          :clearable="true"
          :props="{multiple:true,expandTrigger:'hover'}"
          v-model="formData.position"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="人员资质">
        <el-select
          class="input-inline"
          v-model="formData.rank"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option v-for="rank in clientRankList" :key="rank" :label="rank" :value="rank"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查类型" v-if="sourceType=='inspect'">
        <el-select
          class="input-inline"
          v-model="formData.type"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="type in filterItems.types"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          class="input-inline"
          v-model="formData.status"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="status in filterItems.status"
            :key="status.value"
            :label="status.label"
            :value="status.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交人">
        <el-cascader
          class="input-inline"
          :options="userCascader"
          :show-all-levels="false"
          :clearable="true"
          :props="{multiple:true,expandTrigger:'hover'}"
          v-model="formData.user"
          placeholder="提交人"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <div v-if="!filterOnly" style="text-align:center">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button @click="resetForm">清空</el-button>
      <el-button type="primary" @click="handleSubmit">开始检索</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { pickerOptions, filterItems } from "./statics";
import { makeFilter } from "./functions";
export default {
  props: {
    sourceType: {
      type: String,
      required: false,
      default: "any",
    },
    filterOnly: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    ...mapState({
      clientCascader: (state) => state.clientData.clientCascader,
      userCascader: (state) => state.clientData.userCascader,
      positionCascader: (state) => state.statics.position,
      clientRankList: (state) => state.clientData.clientRankList,
      //Inspect
      sourceInspect: (state) => state.query.sourceInspect,
      inspectCategories: (state) => state.inspectData.inspectCategories,
      //Rectify
      sourceRectify: (state) => state.query.sourceRectify,
      rectifyCategories: (state) => state.rectifyData.rectifyCategories,
    }),
    pickerOptions: () => pickerOptions,
    filterItems: () => filterItems,
  },
  data() {
    return {
      formData: {
        client: [],
        duration: [
          new Date(new Date().getTime() - 365 * 24 * 3600000)
            .toLocaleDateString()
            .replace(/\//g, "-"),
          new Date().toLocaleDateString().replace(/\//g, "-"),
        ],
        category: [],
        rank: [],
        position: [],
        type: [],
        status: [],
        user: [],
      },
      formBlank: "",
      pre: [],
    };
  },
  methods: {
    makeFilter,
    handleModify() {
      let filter = this.makeFilter(this.formData, this.sourceType);
      this.$emit("modifiy", { form: this.formData, filter });
      console.log(filter);
    },
    handleSubmit() {
      let filter = this.makeFilter(this.formData, this.sourceType);
      this.$emit("submit", { form: this.formData, filter });
      console.log(filter);
    },
    // doQuery(filter) {
    //   this.$store
    //     .dispatch("query/queryInspect", { filter })
    //     .then((content) => {
    //       if (content.length > 0) {
    //         this.$notify.success({
    //           title: "检索完成",
    //           message: "共找到" + content.length + "条记录",
    //         });
    //       } else {
    //         this.$notify.warning({
    //           title: "检索完成",
    //           message: "没有找到符合要求的记录",
    //         });
    //       }
    //     })
    //     .catch((error) => {
    //       this.$notify.error({ title: "", message: JSON.stringify(error) });
    //     });
    //   this.$emit("close");
    // },
    resetForm() {
      this.formData = JSON.parse(this.formDataBlank);
    },
    saveForm() {
      this.formDataBlank = JSON.stringify(this.formData);
    },
  },
  mounted() {
    this.saveForm();
  },
};
</script>

<style scoped>
.input-inline {
  width: 100%;
}
</style>